<script type="text/html" id="templates/settings/preferences/misc.html">
  <div class="preferences-panel-misc">
    <div class="settings-item">
      <label>Background</label>
      <div class="background-picker-wrapper">
        <div class="background-picker light-picker-background" data-background="light-canvas-background"
              rel="tooltip" data-placement="bottom" title="light / high contrast">
        </div>
        <div class="background-picker medium-picker-background" data-background="medium-canvas-background"
              rel="tooltip" data-placement="bottom" title="medium / high contrast">
        </div>
        <div class="background-picker lowcont-medium-picker-background" data-background="lowcont-medium-canvas-background"
              rel="tooltip" data-placement="bottom" title="medium / low contrast">
        </div>
        <div class="background-picker lowcont-dark-picker-background" data-background="lowcont-dark-canvas-background"
              rel="tooltip" data-placement="bottom" title="dark / low contrast">
        </div>
      </div>
    </div>

    <div class="settings-item">
      <label>Layer opacity</label>
      <input type="range" class="settings-opacity-input layer-opacity-input" name="layer-opacity" min="0"  max="1" step="0.05"/>
      <span class="settings-opacity-text layer-opacity-text"></span>
    </div>

    <div class="settings-item">
      <label>Maximum FPS</label>
      <input type="text" class="textfield  textfield-small  max-fps-input" autocomplete="off" name="max-fps"/>
    </div>

    <div class="settings-item">
      <label for="color-format">Color format</label>
      <select id="color-format" class="color-format-select">
        <option value="hex">Hex</option>
        <option value="rgb">RGB</option>
      </select>
    </div>
  </div>
</script>